<template>
  <view class="analysis">
    <Header :title="'智能分析'" bgColor="#fff" leftIconSize="leftSize"></Header>
    <view class="analysis-wrap">
      <view class="analysis-top">
        <view class="top-left">
          <image src="@/static/image/pco/mind-icon.png"></image>预警总数量 <text
            class="num">{{ warningNum }}</text><text>次</text>
        </view>
        <view class="top-right">
          <image src="@/static/image/pco/icon1.png"></image>
          <span class="analysis-top-text">15日内数据分析</span>
        </view>
      </view>
      <view class="analysis-trajectory">
        <view class="analysis-tit">
          有害生物行动轨迹分析
          <image :src="imgMinioPath + '/schoolWeb/pco/tit-icon1.png'" class="s-title-bg"></image>
        </view>
        <view class="description ">
          <view class="flex-box">
            <view :class="swiperCurrent==0?'flex-content active':'flex-content'">
              <text></text>
              <view class="desc-text">全部轨迹</view>
            </view>
            <view v-for="(item,index) in dateList" :key="index" class="flex-content" :class="swiperCurrent==index+1 ? ' active' : ''">
              <text class="logotype"></text>
              <view class="desc-text">{{ item.warningDate }}</view>
            </view>
          </view>
        </view>
        <!-- 轮播图开始-->

        <view class="swiper-container">
          <swiper  interval="5000" duration="500" :current="swiperCurrent"
                   :circular="circular" @change="swiperChange" class="swiper">
            <block v-for="(item,index) in slider" :key="index">
              <swiper-item :data-id="item.id" :data-url="item.linkUrl"
                           class="dot{{index == swiperCurrent ? ' active' : ''}}" @click="chuangEvents"
                           :id="index">
                <image :src="item.image" class="img"></image>
                <!--<span>{{item.index+1}}</span>-->
              </swiper-item>
            </block>
          </swiper>
          <view class="dots">
            <swiper  interval="5000" :display-multiple-items="multipleLength" duration="500"
                     :current="dotsCurrent" :circular="circular" @change="dotsChange">
              <block v-for="(item,index) in slider" :key="index">
                <swiper-item :data-id="item.id"
                             :class="swiperCurrent==index?'dot active':'dot'" @click="chuangEvent"
                             :id="index">
                  <image :src="item.image" class="imgs"></image>
                </swiper-item>
              </block>
            </swiper>
          </view>

        </view>
        <!-- 轮播图开始-->

      </view>
<!--      <view class="analysis-date">-->
<!--        <view class="analysis-tit">-->
<!--          有害生物出没时间分析-->
<!--          <image :src="imgMinioPath + '/schoolWeb/pco/tit-icon1.png'" class="s-title-bg"></image>-->
<!--&lt;!&ndash;          <image src="@/static/image/pco/mind-tit.png"></image>&ndash;&gt;-->
<!--        </view>-->
<!--        <view class="analysis-date-list">-->
<!--          <view class="analysis-date-list-date">-->
<!--            <view class="analysis-date-list-date-box"></view>-->
<!--            <view class="analysis-date-list-date-tit">预警高频时间段-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="analysis-date-list-time">-->
<!--            <template v-if="warningDateRangeList && warningDateRangeList.length > 0">-->
<!--							<span class="time-text" v-for="(item, index) in dataProcessing(warningDateRangeList)"-->
<!--                    :key="index">{{ item }}</span>-->
<!--            </template>-->
<!--            <span v-else>&#45;&#45;</span>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view class="analysis-date-echart">-->
<!--          <cusEcharts class="echart" :option="waringLineOption"></cusEcharts>-->
<!--        </view>-->

<!--      </view>-->
    </view>
  </view>
</template>

<script setup name="IntelligentAnalysis">
import dayjs from "dayjs";
import {
  ref,
  reactive
} from 'vue'
import api from "@/api/pco/warningRectification/warningRectification.js";
import {
  onLoad
} from "@dcloudio/uni-app";
const {proxy} = getCurrentInstance();
import config from '@/common/config';
// import cusEcharts from '@/packagePcoCheck/components/cusEcharts/index';
// import {
//   lineOption
// } from '@/packagePcoCheck/components/cusEcharts/option';
const dataList = reactive(['11', '22', '33']);
let leftSize= ref(20);
let multipleLength=ref(0);
// 轮播开始
const slider = ref([]);
const swiperCurrent = ref(0);
const indicatorDots = ref(true);
const dotsCurrent = ref(0);
const autoplay = ref(true);
let interval = ref(2000);
let duration = ref(1000);
let circular = ref(true);
let beforeColor = ref('white'); //指示点颜色
let afterColor = ref('coral'); //当前选中的指示点颜色
//轮播图的切换事件
const swiperChange  =  (e) => {
  swiperCurrent.value = e.detail.current
  //只要把切换后当前的index传给<swiper>组件的current属性即可
};
const dotsChange  =  (e) => {
  //只要把切换后当前的index传给<swiper>组件的current属性即可
  dotsCurrent.value = e.detail.current
};
//点击指示点切换
const chuangEvent  =  (e) => {
  swiperCurrent.value = e.currentTarget.id
};
const chuangEvents  =  (e) => {
  dotsCurrent.value = e.currentTarget.id
};
// 轮播结束
let imgMinioPath = ref(config.IMG_MINIO_PATH.replace("/schoolWeb",""));
// const waringLineData = ref([]);
// const waringLineOption = reactive({
//   ...lineOption
// })
let dateList = ref([]);
let warningInfo = ref({});
let warningNum = ref(0);
// let warningDateRangeList = ref([]);
let id = ref('')
let getWarningInfo = (callback) => {
  proxy.http.get(api.warningRectificationQuery(id.value)).then(res => {
    if (res.code === 0) {
      warningInfo.value = res.data
      callback();
    }
  })
}

let getTodayAnalysis = async () => {
  let query = {
    schoolId: warningInfo.value.schoolId,
    deviceId: warningInfo.value.deviceId,
    warningDate: dayjs(warningInfo.value.warningDate).format('YYYY-MM-DD')
  }
  let res = await proxy.http.post(api.recentDayTrackLine, query)
  if (res.code === 0) {
    dateList.value = res.data.map((item, index) => ({
      warningDate:  dayjs(item.warningDate).format('MM-DD'),
      color: colorList.value[index].color
    }));
    slider.value.push({image:imgMinioPath.value + warningInfo.value.recentDayTrackImage})
    res.data.forEach(item => {
      slider.value.push({image: imgMinioPath.value +item.trackImage});
    });
    if(slider.value.length>4){
      multipleLength.value=4
    }else{
      multipleLength.value=slider.value.length
    }
    warningNum.value = slider.value.length - 1
  }
}

// let analysisRecentDayTrack = async () => {
//   let query = {
//     deviceId: warningInfo.value.deviceId,
//     warningDate: dayjs(warningInfo.value.warningDate).format('YYYY-MM-DD')
//   }
//   let res = await proxy.http.post(api.analysisRecentDayTrack, query)
//   if (res.code === 0) {
//     let xAxis = res.data.xAxis;
//     let yAxis = res.data.yAxis;
//     waringLineData.value = xAxis.map((item, index) => [item, yAxis[index]])
//     warningNum.value = yAxis.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
//     waringLineOption.dataset.source = waringLineData.value
//     let maxValue = Math.max.apply(null, yAxis);
//     if (maxValue > 0) {
//       let maxIndices = [];
//       for (let i = 0; i < yAxis.length; i++) {
//         if (yAxis[i] === maxValue) {
//           maxIndices.push(xAxis[i].replace("点",""));
//         }
//       }
//       function convertToTimeRange(index, hour) {
//         const paddedHour = hour.toString().padStart(2, '0');
//         return `${paddedHour}:00-${paddedHour}:59`;
//       }
//       warningDateRangeList.value = maxIndices.map((hour, index) => convertToTimeRange(index, hour));
//     }
//   }
// }
//
// let dataProcessing = (list) => {
//    console.log(list)
//   // 辅助函数，用于解析时间字符串并返回分钟数
//   let parseTime = (time) => {
//     const [hours, minutes] = time.split(':').map(Number);
//     return hours * 60 + minutes;
//   }
//   // 辅助函数，用于将分钟数转换回时间字符串
//   let formatTime = (minutes) => {
//     const hours = Math.floor(minutes / 60);
//     const mins = String(minutes % 60).padStart(2, '0');
//     return `${hours.toString().padStart(2, '0')}:${mins}`;
//   }
//   // 聚合时间段
//   let start = parseTime(list[0].split('-')[0]); // 起始时间
//   let end = parseTime(list[0].split('-')[1]); // 结束时间
//   let list2 = [];
//
//   for (let i = 1; i < list.length; i++) {
//     const [nextStart, nextEnd] = list[i].split('-').map(parseTime);
//     // 如果当前时间段的开始时间紧接上一个时间段的结束时间，则合并
//     if (nextStart <= end + 1) { // 这里+1是假设允许一个小时的间隔，如果不需要间隔则去掉+1
//       end = Math.max(end, nextEnd); // 更新结束时间
//     } else {
//       // 如果不是连续的，则将上一个时间段添加到结果中，并重置起始和结束时间
//       list2.push(`${formatTime(start)}-${formatTime(end)}`);
//       start = nextStart;
//       end = nextEnd;
//     }
//   }
//   // 添加最后一个时间段
//   list2.push(`${formatTime(start)}-${formatTime(end)}`);
//   return list2;
// };

let imageUrl = (imagePath) => {
  return imgMinioPath.value + imagePath;
}

let picturePreview = (imagePath) => {
  uni.previewImage({
    urls: [imageUrl(imagePath)],
    current: imageUrl(imagePath)
  })
}


/** 数据加载 */
onLoad((option) => {
  if (option.id) {
    id.value = option.id
    getWarningInfo(() => {
      getTodayAnalysis()
      analysisRecentDayTrack()
    })
  }
});

let colorList = ref([{
  color: '#3775F6'
},
  {
    color: '#FD970B'
  },
  {
    color: '#0ECD87'
  },
  {
    color: '#7471E5'
  },
  {
    color: '#FC7B6C'
  },
  {
    color: '#CDBA0E'
  },
  {
    color: '#B8FD0B'
  },
  {
    color: '#048948'
  },
  {
    color: '#E73636'
  },
  {
    color: '#FC6CEE'
  },
  {
    color: '#0796D9'
  },
  {
    color: '#2E12CE'
  },
  {
    color: '#B85B04'
  },
  {
    color: '#B80482'
  },


])
</script>

<style scoped lang="scss">
  .analysis {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background: #F6F6F6;

    .analysis-wrap {
      flex: 1;
      overflow-y: auto;
      padding: 16rpx;

      .analysis-top {
        border-radius: 16upx;
        background: #FFFFFF;
        box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2);
        height: 120upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20upx;

        .top-left {
          font-size: 14px;
          color: #2E2E3A;
          display: flex;
          align-items: center;

          image {
            width: 52upx;
            height: 52upx;
            margin-right: 10upx;
          }

          text {
            color: #1579FA;
            font-weight: bold;
            font-size: 24upx;
            padding-left: 10upx;
          }

          .num {
            font-size: 36upx;
          }
        }

        .top-right {
          display: flex;
          align-items: center;
          font-size: 28upx;

          image {
            width: 30upx;
            height: 30upx;
            margin-right: 10upx;
          }
        }
      }
    }

    &-trajectory {
      background: #fff;
      border-radius: 16rpx;
      margin-top: 20upx;
      padding: 30upx 20upx 30upx 20upx;

      &-video {
        width: 92%;
        height: 350rpx;
        //background: red;
        margin: 0 auto;
      }

      &-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 92%;

        &-item {
          display: flex;
          align-items: center;
          width: 31%;
          height: 80rpx;

          &-left {
            width: 10rpx;
            height: 24rpx;
            border-radius: 16rpx;
            margin-right: 20rpx;
            margin-left: 34rpx;
          }

          &-tit {
            font-size: 24rpx;
            color: #606266;
          }
        }
      }
    }

    &-date {
      margin-top: 16rpx;
      background: #fff;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      padding: 20upx;

      &-echart {
        width: 92%;
        margin: 0 auto;
        height: 400rpx;
        //background: red;
      }

      &-list {
        display: flex;
        width: 100%;
        align-items: center;
        padding: 30rpx 0 30rpx 0;
        flex-wrap: wrap;

        &-number {
          display: flex;
          align-items: center;
          height: 100%;
          width: 35%;

          &-box {
            width: 16rpx;
            height: 16rpx;
            border-radius: 10rpx;
            background: #0E5FEB;
            margin-right: 10rpx;
          }

          &-tit {
            font-size: 28rpx;
            color: #3D3D3D;
          }
        }

        &-date {
          display: flex;
          align-items: center;
          padding-right: 10upx;

          &-box {
            width: 16rpx;
            height: 16rpx;
            border-radius: 10rpx;
            background: #0E5FEB;
            margin-right: 10rpx;
          }

          &-tit {
            font-size: 28rpx;
            color: #3D3D3D;

          }
        }

        &-time {
          display: flex;
          align-items: center;
          flex-direction: column;

        }
      }

    }
  }
  .li-lr{
    margin-left: 10upx;
    nav-right: 10upx;
    margin-bottom: 20rpx;
  }
  .analysis-tit {
    font-size: 32upx;
    color: #252527;
    font-weight: bold;
    position: relative;
    padding-left: 40rpx;
    /*padding: 8upx 20upx 0 40upx;*/
    margin-bottom: 24rpx;
    .s-title-bg{
      width: 120px;
      height: 14px;
      position: absolute;
      left: 0;
      bottom:2px;
    }
    /*image {*/
    /*	position: absolute;*/
    /*	left: 0;*/
    /*	top: 0;*/
    /*	width: 450upx;*/
    /*	height: 46upx;*/
    /*}*/
  }

  .analysis-date-echart {
    position: relative;
  }

  .echart {
    width: 100%;
    height: 100%;
  }

  .bg1 {
    background: #3775F6;
  }

  .num-text {
    padding: 0 10rpx;
    font-size: 32rpx;
    font-weight: bold;
  }

  .time-text {
    color: #0E5FEB;
    border: 1px solid #0E5FEB;
    background: #ECF7FE;
    border-radius: 4px;
    margin-left: 10upx;
    padding: 2upx 10upx;
    font-size: 28upx;
  }

  .analysis-top-img {
    width: 28rpx;
    height: 28rpx;
  }

  .analysis-top-text {
    color: #FF1D03;
  }


  .description {
    background: #F7F8FA;
    padding: 16rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    .flex-box {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      width: 100%;

      .flex-content {
        margin: 2px 0;
        display: flex;
        justify-content: center;
        width: 25%;
        align-items: center;
        box-sizing: border-box;
        padding: 5px 10px;
        font-size: 28upx;
        .desc-text {
          font-size: 24upx;
          font-weight: normal;
        }

        .logotype {
          width: 5px;
          height: 12px;
          border-radius: 16px;
          margin-right: 5px;
        }
      }

      .flex-content.active {
        background: #D2E6FE;
        border-radius: 4px;
      }

      .flex-content:nth-child(2) .logotype {
        background: #3775F6;
      }

      .flex-content:nth-child(3) .logotype {
        background: #FD970B;
      }

      .flex-content:nth-child(4) .logotype {
        background: #0ECD87;
      }

      .flex-content:nth-child(5) .logotype {
        background: #7471E5;
      }

      .flex-content:nth-child(6) .logotype {
        background: #FC7B6C;
      }

      .flex-content:nth-child(7) .logotype {
        background: #CDBA0E;
      }

      .flex-content:nth-child(8) .logotype {
        background: #37F6F0;
      }
      .flex-content:nth-child(9) .logotype {
        background: #B8FD0B;
      }
      .flex-content:nth-child(10) .logotype {
        background: #048948;
      }
      .flex-content:nth-child(11) .logotype {
        background: #E73636;
      }
      .flex-content:nth-child(12) .logotype {
        background: #FC6CEE;
      }
      .flex-content:nth-child(13) .logotype {
        background: #0796D9;
      }
      .flex-content:nth-child(14) .logotype {
        background: #2E12CE;
      }
      .flex-content:nth-child(15) .logotype {
        background: #B85B04;
      }
      .flex-content:nth-child(16) .logotype {
        background: #B8044F;
      }
    }
  }
  /*banner轮播 */

  .swiper-container {
    position: relative;
    padding-bottom: 100rpx;
    margin-bottom: 50rpx;
    padding-left: 15rpx;
    padding-right: 15rpx;
  }

  .swiper-container .swiper {
    height: 350rpx;
  }

  .swiper-container .swiper .img {
    width: 100%;
    height: 100%;
  }

  .swiper-container .dots {
    position: absolute;
    height: 80px;
    right: 0rpx;
    width: 100%;
    bottom: -50rpx;
  }

  .swiper-container .dots .dot {
    height: 65px !important;
  }

  .swiper-container .dots .dot.active .imgs {
    width: 100% !important;
    height: 100%;
    margin: 0% auto;
    border: 1px solid blue;
  }

  .imgs {
    width: 85%;
    display: block;
    margin: 5% auto;
    height: 90%;
  }

  .swiper-container .dotes {
    position: absolute ;
    right: 40rpx  ;
    bottom: 20rpx ;
    display: flex;
    justify-content: center;
  }

  .swiper-container .dotes .dote {
    margin: 0 10rpx;
    width: 28rpx;
    height: 28rpx;
    background: #fff;
    border-radius: 50%;
    transition: all 0.6s;
    text-align: center;
  }

  .swiper-container .dotes .dote.actives {
    background: #f80;
    color: #fff;
  }

</style>
